<template>
  <div class="news">
    <!--导航区-->
    <ul>
      <li v-for="item in newsList" :key="item.id">
        <!--""里面放反引号``-->
        <!--第一种写法-->
        <!--<RouterLink
          :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`"
          >{{ item.title }}</RouterLink
        >-->
        <!--第二种写法-->
        <!--<RouterLink
          :to="`/news/detail/${item.id}/${item.title}/${item.content}`"
        >
          {{ item.title }}
        </RouterLink>-->
        <!--第三种写法-->
        <RouterLink
          :to="{
            name: 'xiangqing',
            params: {
              id: item.id,
              title: item.title,
              content: item.content,
            },
          }"
        >
          {{ item.title }}
        </RouterLink>
      </li>
    </ul>
    <!--详情区-->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from "vue";
import { RouterView, RouterLink } from "vue-router";

const newsList = reactive([
  {
    id: "abc0001",
    title: "十种抗癌食物",
    content:
      "绿色蔬菜：菠菜、羽衣甘蓝、生菜等深绿色蔬菜，富含纤维素、叶酸和各种类胡萝卜素，有一定补充人体维生素的作用,豆类：大豆、豌豆、扁豆等豆类食品富含纤维素、植物素、蛋白质以及叶酸和维生素B，这些成分可能有助于预防结直肠癌、口咽癌、喉癌、肺癌等疾病，也是优质的植物蛋白来源，对维持身体健康有帮助。",
  },
  {
    id: "abc0002",
    title: "如何一夜暴富",
    content: "投机？炒股？马斯克推出新品狗狗币，或将成为投机风口？",
  },
  {
    id: "abc0003",
    title: "震惊！有孕猫一胎四宝，拦路找我接生啦",
    content: "渣猫无情无义，小猫一胎四宝，独自求生，向人类求助：捡了一只人类喵",
  },
  {
    id: "abc0004",
    title: "好消息！一块钱可以抢华为折叠手机啦！",
    content: "做慈善？拼多多为您倾情推荐华为好物，一块就抢，抢着开心，用着放心",
  },
]);
</script>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  list-style: none;
  padding-left: 10px;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>